<!-- 创建时间: 2020年12月23日 Wednesday 09:13 -->
<template>
    <div class="teacher_container">
        <el-row class="menu">
            <el-col :xs="6"
                    :sm="6"
                    :md="5">
                <el-tag>欢迎 {{ userName }} 教师，登录小花考试</el-tag>
                <br />
                <el-tag>教师工号: {{ userNumber }}</el-tag>
                <el-link type="info"
                         @click.prevent="outLogin()"><i class="fa fa-power-off"></i>退出</el-link>
            </el-col>
            <el-col :sm="6"
                    :md="6"
                    v-if="flag">
                <el-card shadow="hover"
                         class="createCoursesClass"
                         @click.native="createCoursesClass(1)">
                    考试课程
                </el-card>
            </el-col>
            <el-col :sm="6"
                    :md="6"
                    v-if="flag">
                <el-card shadow="hover"
                         class="createCoursesClass"
                         @click.native="createCoursesClass(2)">
                    创建考试课程
                </el-card>
            </el-col>
            <el-col :sm="6"
                    :md="6"
                    v-if="flag"
                    class="menu_more">
                <el-image class="table-td-thumb"
                          src="images/more.png"
                          :class="{ 'el-image-active': menuMoreClass }"
                          @click="menuMore()"
                          title="更多"></el-image>
            </el-col>
        </el-row>
        <transition mode="out-in"
                    name="el-fade-in"
                    v-if="flag">
            <router-view></router-view>
        </transition>
        <transition-group name="moveL"
                          tag="div">
            <div class="rotating"
                 v-if="rotatShowStatus"
                 :key="1">
                <ul class="rotating_ul">
                    <li v-for="(item, index) in expansionPanel"
                        :key="index">
                        <router-link :to="{
                                        name: item.url,
                                        query: {
                                            session: session,
                                        },
                                    }">
                            <el-avatar :src="item.imgSrc"></el-avatar>
                            <span class="rotating_ul_title">{{
                                        item.title
                                    }}</span>
                        </router-link>
                    </li>
                </ul>
            </div>
            <div class="rotating_mask"
                 @click="menuMore()"
                 v-if="rotatShowStatus"
                 :key="2"></div>
        </transition-group>
        <subComp v-if="!flag"
                 :msg="teacherInfo"></subComp>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import updatepass from "../student/personalCenter.vue";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        subComp: updatepass,
    },
    data () {
        //这里存放数据
        return {
            currentPath: this.$route.path, // 当前路由
            userName: "", // 教师姓名
            userNumber: "", // 教师工号
            flag: JSON.parse(sessionStorage.getItem("flag")),
            teacherInfo: "teacher",
            menuMoreClass: false, // 更多按钮添加点击旋转样式
            rotatShowStatus: false, // 控制打开扩展面板
            session: "",
            expansionPanel: [{
                url: "wxSigin",
                title: "小花签到",
                imgSrc: "images/signInLogo.png",
            },],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        $route (to, form) {
            this.currentPath = to.fullPath;
        },
    },
    beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当钩子执行前，组件实例还没被创建
        next();
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        next();
    },
    beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        if (to.name == "signIn") {
            let info = {
                userName: this.userName,
                userNumber: this.userNumber,
            };
            localStorage.setItem(this.session, JSON.stringify(info));
        }
        next();
    },
    //方法集合
    methods: {
        createCoursesClass (num) {
            if (num == 1 && this.currentPath != "/teacher/coursesClass") {
                this.$router.push("/teacher/coursesClass");
            } else if (
                num == 2 &&
                this.currentPath != "/teacher/createCoursesClass"
            ) {
                this.$router.push("/teacher/createCoursesClass");
            }
        },
        autoGetUserInfo () {
            this.userName = this.$store.getters.getUserName;
            this.userNumber = this.$store.getters.getUserNumber;
        },
        outLogin () {
            this.$http.get("logOut", {
                params: {
                    userNumber: this.$store.getters.getUserNumber
                },
            });
            sessionStorage.removeItem(this.$store.getters.getUserNumber);
            window.clearVuexAlong(true, false);
            this.$store.commit("setAddQuestions", "");
            this.$store.commit("setQuestionsList", []);
            this.$store.commit("setUserName", "");
            this.$store.commit("setUserNumber", "");
            this.$router.push("/");
        },
        menuMore () {
            this.menuMoreClass = !this.menuMoreClass;
            this.rotatShowStatus = !this.rotatShowStatus;
            this.session = new Date().getTime();
        },
    },

    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        this.autoGetUserInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () { },
    //当data中定义的数据有变化时就会加载updated方法
    updated () { },
};
</script>

<style lang="scss">
.moveL-enter-active,
.moveL-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0%);
}

.moveL-enter,
.moveL-leave {
    transform: translateX(-100%);
}

.moveL-leave-to {
    transform: translateX(-100%);
}

.rotating {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 60%;
    width: 60%;
    z-index: 998;
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    box-shadow: 0px 0px 1px 0px white;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    padding: 10px;

    ul.rotating_ul {
        list-style: none;
        margin: 0;
        padding-inline-start: 0;

        li {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            margin-bottom: 10px;
            border: 0px solid black;
            width: 100px;
            height: 100px;

            a {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                cursor: pointer;
                text-decoration: none;
            }

            .el-avatar {
                width: 60px;
                height: 60px;
            }
        }

        .rotating_ul_title {
            color: gray;
            font-size: 12px;
            margin-top: 5px;
        }
    }
}

.rotating_mask {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
    margin: auto;
    width: 100%;
    height: 100%;
    background-color: rgba(191, 191, 191, 0.3);
    z-index: 996;
}
</style>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.teacher_container {
    .menu {
        padding: 10px 10px 0px 10px;
        user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;

        .createCoursesClass {
            text-align: center;
            cursor: pointer;
            background: #aeeef1 !important;
            color: tomato;
            font-weight: bold;
            letter-spacing: 5px; // 字间距
        }

        .createCoursesClass:hover {
            border: 1px solid sandybrown;
        }

        .menu_more {
            display: flex;
            justify-content: end;
            padding: 8px 0;

            .el-image {
                transition: all 0.5s;
                z-index: 997;
            }

            .el-image-active {
                -ms-transform: rotate(90deg);
                /* IE 9 */
                -webkit-transform: rotate(90deg);
                /* Safari and Chrome */
                transform: rotate(90deg);
                transition: all 0.5s;
            }
        }
    }
}
</style>
